import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
import { Card } from "antd-mobile";
import { SearchOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import axios from "axios";
// import './czs.css'

export default function list() {
  const navigate = useNavigate();
  const location = useLocation();
  const { id, name } = location.state;
  const [typelist, setTypeList] = useState([
    {
      id: 1,
      img: "./listimgs/房屋清洁.jpeg",
      typeId: 1,
      user: "王小小",
      content: "房屋清洁",
      price: 200,
      score: 4.8,
      evaluate: 4479,
      collect: 0,
    },
    {
      id: 2,
      img: "./listimgs/地板清洁.jpeg",
      typeId: 1,
      user: "李名扬",
      content: "地板清洁",
      price: 230,
      score: 4.9,
      evaluate: 6182,
      collect: 0,
    },
    {
      id: 3,
      img: "./listimgs/衣物清洁1.jpeg",
      typeId: 1,
      user: "张小花",
      content: "衣物清洁",
      price: 150,
      score: 4.7,
      evaluate: 7938,
      collect: 1,
    },
    {
      id: 4,
      img: "./listimgs/浴室清洁.jpeg",
      typeId: 1,
      user: "张芯芯",
      content: "浴室清洁",
      price: 210,
      score: 4.9,
      evaluate: 6182,
      collect: 0,
    },
    {
      id: 5,
      img: "./listimgs/衣物清洁2.jpeg",
      typeId: 1,
      user: "杨雨涛",
      content: "衣物清洁",
      price: 150,
      score: 2.5,
      evaluate: 938,
      collect: 1,
    },
  ]);
  // const gettypeList = () => {
  //   axios.get('http://localhost:3000/typelist').then(
  //       res => {
  //           setTypeList(res.data)
  //       }
  //   )
  // }
  const newtypeList = typelist.filter((item) => item.typeId == id);
  // const collectClick = (id,collect) => {
  //   if(collect == 0){
  //     axios.put('http://localhost:3000/typelist',{id:id,collect:1}).then(
  //       res => {
  //         // Toast.success('收藏成功')
  //         alert('收藏成功')
  //         gettypeList()
  //       }
  //     )
  //   }else{
  //     axios.put('http://localhost:3000/typelist',{id:id,collect:0}).then(
  //       res => {
  //         // Toast.success('取消收藏成功')
  //         alert('取消收藏成功')
  //         gettypeList()
  //       }
  //     )
  //   }
  // }
  // useEffect(() => {
  //   gettypeList()
  // }, [])
  return (
    <div className="czs_listbox">
      <div className="czs_top">
        <div>
          <img
            onClick={() => {
              navigate(-1);
            }}
            className="czs_back"
            src="./czs_imgs/返回.png"
            alt=""
          />
          <span className="czs_title">
            <b>{name}</b>
          </span>
        </div>
        <SearchOutline className="czs_search" onClick={() => {
          navigate("/search");
        }} />
      </div>

      <div className="czs_listbody">
        {newtypeList.map((item) => {
          return (
            <Card
              onClick={() => {
                navigate("/czs_details", { state: { id: item.id } });
              }}
              key={item.id}
              className="czs_card"
            >
              <dl style={{ display: "flex" }}>
                <dd>
                  <img className="czs_typelist_img" src={item.img} alt="" />
                </dd>
                <dt style={{ display: "flex" }}>
                  <div>
                    <p className="czs_p1">{item.user}</p>
                    <p className="czs_h6">
                      <b>{item.content}</b>
                    </p>
                    <p className="czs_p2">
                      <b>￥{item.price}</b>
                    </p>
                    <p className="czs_p3">
                      <img
                        className="czs_typelist_star"
                        src="./czs_imgs/星星.png"
                        alt=""
                      />
                      {item.score}&nbsp;&nbsp;|&nbsp;&nbsp;{item.evaluate}评价
                    </p>
                  </div>
                  <div style={{ marginLeft: "60px" }}>
                    {item.collect == 0 ? (
                      <img
                        onClick={() => {
                          collectClick(item.id, item.collect);
                        }}
                        className="czs_collect_false"
                        src="./czs_imgs/收藏.png"
                        alt=""
                      />
                    ) : (
                      <img
                        className="czs_collect_true"
                        src="./czs_imgs/收藏选中.png"
                        alt=""
                      />
                    )}
                  </div>
                </dt>
              </dl>
            </Card>
          );
        })}
      </div>
    </div>
  );
}
